<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <link rel="stylesheet" href="node_modules/normalize.css/normalize.css">
    <link rel="stylesheet" href="node_modules/bootstrap/dist/css/bootstrap.min.css">
    <link rel="stylesheet" href="css/common.css">
    <title>上官清偌</title>
</head>
<body>
<nav class="navbar navbar-default">
    <div class="container">
        <!-- Brand and toggle get grouped for better mobile display -->
        <div class="navbar-header">
            <button type="button" class="navbar-toggle collapsed" data-toggle="collapse"
                    data-target="#bs-example-navbar-collapse-1" aria-expanded="false">
                <span class="sr-only">Toggle navigation</span>
                <span class="icon-bar"></span>
                <span class="icon-bar"></span>
                <span class="icon-bar"></span>
            </button>
            <a class="navbar-brand" href="#">
                <img src="img/logo.png" alt="">
            </a>
        </div>
        <div class="collapse navbar-collapse" id="bs-example-navbar-collapse-1">
            <ul class="nav navbar-nav">
                <li class="active"><a href="#">首页</a></li>
                <li><a href="#">VIP</a></li>
                <li><a href="#">视频库</a></li>
                <li><a href="#">活动</a></li>
                <li><a href="#">社区</a></li>
                <li class="dropdown">
                    <a href="#" class="dropdown-toggle" data-toggle="dropdown" role="button" aria-haspopup="true"
                       aria-expanded="false">关于<span class="caret"></span></a>
                    <ul class="dropdown-menu">
                        <li><a href="#">关于上官</a></li>
                        <li role="separator" class="divider"></li>
                        <li><a href="#">在线咨询</a></li>
                        <li role="separator" class="divider"></li>
                        <li><a href="#">人才招聘</a></li>
                    </ul>
                </li>
            </ul>
            <form class="nav navbar-nav navbar-right">
                <button type="button" class="btn btn-default btn-qq"></button>
                <button type="button" class="btn btn-default btn-weibo"></button>
            </form>
            <form class="navbar-form navbar-right">
                <div class="form-group">
                    <input type="text" class="form-control" placeholder="请输入。。。。">
                </div>
                <button type="submit" class="btn btn-default">搜索</button>
            </form>

        </div><!-- /.navbar-collapse -->
    </div><!-- /.container-fluid -->
</nav>
<!--轮插图-->
<div id="banner" class="carousel slide" data-ride="carousel">
    <!-- 小圆点 -->
    <ol class="carousel-indicators">
        <li data-target="#carousel-example-generic" data-slide-to="0"></li>
        <li data-target="#carousel-example-generic" data-slide-to="1" class="active"></li>
        <li data-target="#carousel-example-generic" data-slide-to="2"></li>
    </ol>

    <!-- 卡片容器 -->
    <div class="carousel-inner" role="listbox">
        <div class="item">
            <img src="img/banner1.png" alt="...">
        </div>
        <div class="item active">
            <img src="img/banner2.png" alt="...">
        </div>
        <div class="item">
            <img src="img/banner5.png" alt="...">
        </div>
    </div>

    <!-- 控制器 -->
    <a class="left carousel-control" href="#banner" role="button" data-slide="prev">
        <span class="glyphicon glyphicon-chevron-left"></span>
        <span class="sr-only">上一张</span>
    </a>
    <a class="right carousel-control" href="#banner" role="button" data-slide="next">
        <span class="glyphicon glyphicon-chevron-right"></span>
        <span class="sr-only">下一张</span>
    </a>
</div>
<!--轮插图-->
<div class="container">
    <div class="row">
        <div class="col-md-12">
            <h4 class="">Vip</h4>
            <hr>
        </div>
    </div>
    <div class="row">
        <div class="col-md-3 col-xs-6 ">
            <a href="#" class="thumbnail">
                <img src="img/android.jpg"  alt="">
            </a>
        </div>
        <div class="col-md-3 col-xs-6">
            <a href="#" class="thumbnail">
                <img src="img/android.jpg" alt="">
            </a>
        </div>
        <div class="col-md-3 col-xs-6">
            <a href="#" class="thumbnail">
                <img src="img/android.jpg" alt="">
            </a>
        </div>
        <div class="col-md-3 col-xs-6">
            <a href="#" class="thumbnail">
                <img src="img/android.jpg" alt="">
            </a>
        </div>
        <div class="col-md-3 col-xs-6">
            <a href="#" class="thumbnail">
                <img src="img/android.jpg" alt="">
            </a>
        </div>
        <div class="col-md-3 col-xs-6">
            <a href="#" class="thumbnail">
                <img src="img/android.jpg" alt="">
            </a>
        </div>
        <div class="col-md-3 col-xs-6">
            <a href="#" class="thumbnail">
                <img src="img/android.jpg" alt="">
            </a>
        </div>
        <div class="col-md-3 col-xs-6">
            <a href="#" class="thumbnail">
                <img src="img/android.jpg" alt="">
            </a>
        </div>
        <div class="col-md-3 col-xs-6">
            <a href="#" class="thumbnail">
                <img src="img/android.jpg" alt="">
            </a>
        </div>
        <div class="col-md-3 col-xs-6">
            <a href="#" class="thumbnail">
                <img src="img/android.jpg" alt="">
            </a>
        </div>
        <div class="col-md-3 col-xs-6">
            <a href="#" class="thumbnail">
                <img src="img/android.jpg" alt="">
            </a>
        </div>
        <div class="col-md-3 col-xs-6">
            <a href="#" class="thumbnail">
                <img src="img/android.jpg" alt="">
            </a>
        </div>
    </div>
    <div class="container">
        <div class="row">
            <div class="col-md-12">
                <h3>今日公开课</h3>
                <hr>
            </div>
        </div>
        <div class="row">
            <div class="col-xs-6 col-md-3">
                <div class="thumbnail">
                    <img src="img/openClass1.png" alt="...">
                    <div class="caption">
                        <p>讲师： Star老师</p>
                        <p>时间： 7月31日 20:30</p>
                        <p>地点： 腾讯课堂</p>
                        <p class="text-center">
                            <a href="#" class="btn btn-primary btn-sm" role="button">立即学习</a>
                        </p>
                    </div>
                </div>
            </div>
            <div class="col-xs-6 col-md-3">
                <div class="thumbnail">
                    <img src="img/openClass2.png" alt="...">
                    <div class="caption">
                        <p>讲师： Star老师</p>
                        <p>时间： 7月31日 20:30</p>
                        <p>地点： 腾讯课堂</p>
                        <p class="text-center">
                            <a href="#" class="btn btn-primary btn-sm" role="button">立即学习</a>
                        </p>
                    </div>
                </div>
            </div>
            <div class="col-xs-6 col-md-3">
                <div class="thumbnail">
                    <img src="img/openClass3.png" alt="...">
                    <div class="caption">
                        <p>讲师： Star老师</p>
                        <p>时间： 7月31日 20:30</p>
                        <p>地点： 腾讯课堂</p>
                        <p class="text-center">
                            <a href="#" class="btn btn-primary btn-sm" role="button">立即学习</a>
                        </p>
                    </div>
                </div>
            </div>
            <div class="col-xs-6 col-md-3">
                <div class="thumbnail">
                    <img src="img/openClass4.png" alt="...">
                    <div class="caption">
                        <p>讲师： Star老师</p>
                        <p>时间： 7月31日 20:30</p>
                        <p>地点： 腾讯课堂</p>
                        <p class="text-center">
                            <a href="#" class="btn btn-primary btn-sm" role="button">立即学习</a>
                        </p>
                    </div>
                </div>
            </div>
        </div>
    </div>
</div>
<div class="container">
    <div class="row">
        <div class="col-md-12">
            <h3>明星学员</h3>
            <hr>
        </div>
    </div>
    <div class="row">
        <div class="col-md-6 col-xs-12 student">
            <div class="media">
                <a class="media-left" href="#">
                    <img src="img/student1.png" alt="...">
                </a>
                <div class="media-body">
                    <h4 class="media-heading">张洪涛</h4>
                    <p>
                        所学课程<a href="">《ANDROID/安卓/自定义控件/NDK/架构/REACT/性能优化【动脑学院】》</a>动脑学院ANDROID开发课程毕业学员，就职于新浪，任职安卓高级工程师，薪资15K*16
                    </p>
                </div>
            </div>
        </div>
        <div class="col-md-6 col-xs-12 student">
            <div class="media">
                <a class="media-left" href="#">
                    <img src="img/student2.png" alt="...">
                </a>
                <div class="media-body">
                    <h4 class="media-heading">王登辉</h4>
                    <p>
                        所学课程<a href="">《ANDROID/安卓/自定义控件/NDK/架构/REACT/性能优化【动脑学院】》</a>动脑学院ANDROID开发课程毕业学员，就职于新浪，任职安卓高级工程师，薪资15K*16
                    </p>
                </div>
            </div>
        </div>
        <div class="col-md-6 col-xs-12 student">
            <div class="media">
                <a class="media-left" href="#">
                    <img src="img/student3.png" alt="...">
                </a>
                <div class="media-body">
                    <h4 class="media-heading">黄洁</h4>
                    <p>
                        所学课程<a href="">《ANDROID/安卓/自定义控件/NDK/架构/REACT/性能优化【动脑学院】》</a>动脑学院ANDROID开发课程毕业学员，就职于新浪，任职安卓高级工程师，薪资15K*16
                    </p>
                </div>
            </div>
        </div>
        <div class="col-md-6 col-xs-12 student">
            <div class="media">
                <a class="media-left" href="#">
                    <img src="img/student4.png" alt="...">
                </a>
                <div class="media-body">
                    <h4 class="media-heading">范娟</h4>
                    <p>
                        所学课程<a href="">《ANDROID/安卓/自定义控件/NDK/架构/REACT/性能优化【动脑学院】》</a>动脑学院ANDROID开发课程毕业学员，就职于新浪，任职安卓高级工程师，薪资15K*16
                    </p>
                </div>
            </div>
        </div>
    </div>
</div>
<div class="container">
    <div class="row">
        <div class="col-md-12">
            <h3>师资团队</h3>
            <hr>
        </div>
    </div>
    <div class="row">
        <div class="col-md-3 col-xs-6">
            <a class="thumbnail" href="#">
                <img src="img/t01.png" alt="">
                <div class="caption text-center">
                    <h4>专家顾问团队</h4>
                    <p>课程质量保证</p>
                </div>
            </a>
        </div>
        <div class="col-md-3 col-xs-6">
            <a class="thumbnail" href="#">
                <img src="img/t02.png" alt="">
                <div class="caption text-center">
                    <h4>金牌讲师团队</h4>
                    <p>教学质量保证</p>
                </div>
            </a>
        </div>
        <div class="col-md-3 col-xs-6">
            <a class="thumbnail" href="#">
                <img src="img/t03.png" alt="">
                <div class="caption text-center">
                    <h4>教学服务团队</h4>
                    <p>服务质量保证</p>
                </div>
            </a>
        </div>
        <div class="col-md-3 col-xs-6">
            <a class="thumbnail" href="#">
                <img src="img/t04.png" alt="">
                <div class="caption text-center">
                    <h4>就业指导团队</h4>
                    <p>就业质量保证</p>
                </div>
            </a>
        </div>
    </div>
</div>
<div class="container">
    <div class="row">
        <div class="col-md-12">
            <h3>合作伙伴</h3>
            <hr>
        </div>
    </div>
    <div class="row">
        <div class="col-xs-12 col-md-8">
            <div class="col-xs-4 col-md-2 friends">
                <img class="img-responsive img-circle img-thumbnail" src="img/alibaba.png" alt="">
            </div>
            <div class="col-xs-4 col-md-2 friends">
                <img class="img-responsive img-circle img-thumbnail" src="img/asiainfo.png" alt="">
            </div>
            <div class="col-xs-4 col-md-2 friends">
                <img class="img-responsive img-circle img-thumbnail" src="img/baidu.png" alt="">
            </div>
            <div class="col-xs-4 col-md-2 friends">
                <img class="img-responsive img-circle img-thumbnail" src="img/huawei.png" alt="">
            </div>
            <div class="col-xs-4 col-md-2 friends">
                <img class="img-responsive img-circle img-thumbnail" src="img/alibaba.png" alt="">
            </div>
            <div class="col-xs-4 col-md-2 friends">
                <img class="img-responsive img-circle img-thumbnail" src="img/alibaba.png" alt="">
            </div>
            <div class="col-xs-4 col-md-2 friends">
                <img class="img-responsive img-circle img-thumbnail" src="img/alibaba.png" alt="">
            </div>
            <div class="col-xs-4 col-md-2 friends">
                <img class="img-responsive img-circle img-thumbnail" src="img/alibaba.png" alt="">
            </div>
            <div class="col-xs-4 col-md-2 friends">
                <img class="img-responsive img-circle img-thumbnail" src="img/alibaba.png" alt="">
            </div>
            <div class="col-xs-4 col-md-2 friends">
                <img class="img-responsive img-circle img-thumbnail" src="img/alibaba.png" alt="">
            </div>
            <div class="col-xs-4 col-md-2 friends">
                <img class="img-responsive img-circle img-thumbnail" src="img/alibaba.png" alt="">
            </div>
            <div class="col-xs-4 col-md-2 friends">
                <img class="img-responsive img-circle img-thumbnail" src="img/alibaba.png" alt="">
            </div>
            <div class="col-xs-4 col-md-2 friends">
                <img class="img-responsive img-circle img-thumbnail" src="img/alibaba.png" alt="">
            </div>
            <div class="col-xs-4 col-md-2 friends">
                <img class="img-responsive img-circle img-thumbnail" src="img/alibaba.png" alt="">
            </div>
            <div class="col-xs-4 col-md-2 friends">
                <img class="img-responsive img-circle img-thumbnail" src="img/alibaba.png" alt="">
            </div>
            <div class="col-xs-4 col-md-2 friends">
                <img class="img-responsive img-circle img-thumbnail" src="img/alibaba.png" alt="">
            </div>
            <div class="col-xs-4 col-md-2 friends">
                <img class="img-responsive img-circle img-thumbnail" src="img/alibaba.png" alt="">
            </div>
            <div class="col-xs-4 col-md-2 friends">
                <img class="img-responsive img-circle img-thumbnail" src="img/alibaba.png" alt="">
            </div>
        </div>
        <div class="col-xs-12 col-md-4">
            <div class="list-group">
                <a class="list-group-item active lead">
                    常见问题
                </a>
                <a href="#" class="list-group-item">Dapibus ac facilisis in</a>
                <a href="#" class="list-group-item">Morbi leo risus</a>
                <a href="#" class="list-group-item">Porta ac consectetur ac</a>
                <a href="#" class="list-group-item">Porta ac consectetur ac</a>
                <a href="#" class="list-group-item">Porta ac consectetur ac</a>
                <a href="#" class="list-group-item">Vestibulum at eros</a>
            </div>
        </div>
    </div>
</div>
<footer class="container">
    <div class="row text-center">
        <hr>
        <h4>上官网络</h4>
        <p>Copyright 2008-2016 www.dongnaoedu.com</p>
    </div>
</footer>
<script src="node_modules/jquery/dist/jquery.min.js"></script>
<script src="node_modules/bootstrap/dist/js/bootstrap.min.js"></script>
</body>
</html>

